.svg)
Components of the Chart
Understanding the visual representation of the chart's internal objects
This tutorial provides an overview of the various components, or "parts" of the chart and the underlying programming objects that represent them. Chart Data Objects is a companion tutorial.
UI Vs. Chart
We commonly refer to the "UI" and the "chart". The "chart" is what is created and managed by the chart engine (stxx). This is everything that is inside the chart container div.
The "UI" is the DOM layer of your application that interacts with the chart. In this example, we see the UI and chart portions of sample-template-advanced.html. Here, the UI is built using web components, but it can really be built in any technology. Typically, the UI will consist of menus and dialogs.
Web Components
sample-template-advanced.html comes with several web components that interact with the chart. You can use these or build your own components. The important thing to note is that these are DOM elements. DOM elements are easier to style, and support mouse/touch events for interactivity.
The components that are layered on the chart are markers. Markers are DOM elements that have been passed to the chart. The chart manages the location of the markers. Markers may be positioned statically (at a specific, fixed location), like these ones, or they may float at a date or price location (and move as the chart and data update).
We use the term "Heads Up Display" or "HUD" to refer to any display that shows the underlying values of the bar that the mouse is hovering over (the bar that the crosshairs are pointing to). Typically, customers build their own HUD to fit into their application. Some customers choose to display only OHLC information while others display the values of all series and studies. This choice depends on your use-case. Note: The next image below displays another type of floating HUD.
Chart Controls
Chart controls are DOM elements that that the chart automatically creates. These will live within the chart container. You can style the chart controls by adding CSS elements to their classes (use the Chrome Inspector to find out which classes are used). To hide chart controls, simply add CSS that overrides a control's class with display:none. Note: There are a few additional controls not displayed here such as the save and cancel buttons used by the annotation drawing tool.
The price labels (Current HR and Float HR, HR being horizontal rule) are drawn directly on the canvas. Styling can still be controlled by CSS with rules for .stx_current_hr_up,.stx_current_hr_down and .stx-float-price. If you don't like the pointy arrow, the chart supports several shapes for price labels. See: CIQ.ChartEngine#yaxisLabelStyle.
Canvas Elements
The chart itself is rendered on an HTML5 canvas element. The parts that are rendered on the canvas cannot be referenced as objects (the canvas is a bitmap) but their styles can be changed using CSS. See CSS Used by the Chart. When a user navigates by zooming or scrolling, this entire canvas is redrawn at a rate of 60+ frames per second (fps).
Data and the Chart
Please be sure to read Chart Data Objects to understand the data objects that drive the chart. Here we have provided a visual display of these objects and how they relate to the chart.
If you plan on interacting with the chart at a deep level, you will need to understand which objects to use and how to use them. Notice that the dataSet extends beyond the visible area of the chart. Notice also how the x-axis extends beyond the end of the dataSegment.
By convention, we refer to the main symbol as the "masterData" and any comparisons as "series" data, but in reality they are all just fields in the same masterData array. On this chart, you would see "Open","High","Low","Close" and "GE" fields in every masterData array object.
Axis Values
A large portion of the chart engine is dedicated to calculating and display the axis and grid lines. For advanced interactions you may need to understand some of the mechanics. For instance, the chart calculates and maintains the high and low values on the y-axis. These are the basis for all other calculations. See CIQ.ChartEngine.XAxis and CIQ.ChartEngine.YAxis for more information on the axis and what variables you can control or observe.
A frequent question is around the grid line spacing algorithm. The chart attempts to create an aesthetically pleasing grid and readable labels. The algorithm balances the space between labels with the readability of the label values. The algorithm takes into account market opening and closing times and uses "date and time math" rather than numeric math. You can influence the algorithm by manually setting the ideal tick size for either or both axes. This should only be done if the chart will always be rendered at a known height and width.
Panels, Series & Studies
The ChartEngine contains a "chart" object which is referenced with stxx.chart. The chart is drawn inside a panel: stxx.chart.panel. The masterData (OHLC data for the stock symbol) is plotted in the chart panel.
Additional data can be plotted by adding "series" to the masterData (See {link CIQ.ChartEngine#addSeries}). An example would be a comparison of another stock symbol. The parameters for the series (color, width) are stored in the stxx.chart.series object but the actual data values are stored in masterData.
Additional panels may be added when studies are created. Panels are stacked vertically and can be rearranged by the end user.
The stxx.layout.panels object contains all the panels associated with the chart.
The panels are named based on the study that created them.
Every panel contains two arrays of y-axis: stxx.chart.panel.yaxisLHS and stxx.chart.panel.yaxisRHS.
Usually a panel only has a single y-axis: stxx.chart.panel.yaxis===stxx.chart.panel.yaxisRHS[0].
The chart only has a single x-axis: stxx.chart.xAxis. All panels share this x-axis.
Studies that do not require a panel are called "overlays". Usually, an overlay exists on the main chart panel, but overlays can also be added to study panels. The main difference between a "series" and a "study" is that a study is a calculated value.